<template>
    <div class="goods_stock_list_container">
        <vxe-table-template :data="dataList" :options.sync="tableOptions" />
    </div>
</template>

<script>

export default {
    name: "GoodsStockList",
    props: {
        row: {
            type: Object,
            default: null,
        },
    },
    data() {
        let _this = this;
        return {
            dataList: [],
            tableOptions: {
                ref: "goodsStockTable",
                container: ".goods_stock_list_container",
                columns: [
                    {
                        label: '编号',
                        prop: 'goods_code',
                        align: 'center',
                    },
                    {
                        label: '名称',
                        prop: 'goods_name',
                        align: 'center',
                    },
                    {
                        label: '规格值',
                        prop: 'goods_specifications',
                        align: 'center',
                        minWidth: 200,
                        render: (h, { row }) => {
                            if (_this.$utils.isNotEmpty(row.spec_info)) {
                                return h("el-tag", `${row.spec_info}`);
                            }
                            if (row.goods_specifications) {
                                let specificationArr = JSON.parse(row.goods_specifications);
                                let arr = specificationArr.map(item => {
                                    return h("el-tag", {
                                        style: {
                                            'margin-right': '5px',
                                        },
                                        props: {},
                                    }, `${ item.specification }：${ item.value }`);
                                });
                                return h('div', {}, arr);
                            } else {
                                return h('div', {});
                            }
                        },
                    },
                    {
                        label: '仓库',
                        prop: 'warehouse_name',
                        align: 'center',
                        minWidth: 130,
                    },
                    {
                        label: '货品价格',
                        prop: 'goods_product_price',
                        align: 'center',
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 4),
                    },
                    {
                        label: '货品数量',
                        prop: 'stock_sum_qty',
                        align: 'center',
                    },
                ],
                operates: false,
                pagination: false,
                getMaxHeight() {
                    return $(_this.getActiveTabsContainer()).height() * 0.8 - 100;
                },
            },
            goods_sid: undefined,
        }
    },
    watch: {
        row: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async init() {
            const _this = this;
            if (!_this.row) {
                return;
            }
            _this.dataList = [];
            await _this.initStockGoodsList(_this.row);
        },
        // 获取物料库存
        initStockGoodsList(row) {
            let _this = this;
            return _this.fetchData(_this.$api.API_GetJxcStockGoodsListByGoodsSid, {
                goods_sid: row.sid,
            }).then(res => {
                _this.dataList = _this.resetIndex(res.data) || [];
            }).catch(() => {
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>

</style>
